<template>
	<view class="banner">
		<swiper class="banner" :indicator-dots="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="fdj" @click="gosearch">
			<image src="@/static/index/fdj.png" mode=""></image>
		</view>
	</view>
	<view class="tabsbg">
		<view class="tabitem" @click="gozp">
			<image src="@/static/index/i1.png" mode=""></image>
			<text>族谱查询</text>
		</view>
		<view class="tabitem" @click="gorq">
			<image src="@/static/index/i2.png" mode=""></image>
			<text>认亲查询</text>
		</view>
		<view class="tabitem" @click="gojz">
			<image src="@/static/index/i3.png" mode=""></image>
			<text>贡献捐赠</text>
		</view>
		<view class="tabitem" @click="golist(2)">
			<image src="@/static/index/i4.png" mode=""></image>
			<text>{{systemInfo.configName}}氏公告</text>
		</view>
		<view class="tabitem" @click="golist(9)">
			<image src="@/static/index/i5.png" mode=""></image>
			<text>{{systemInfo.configName}}氏名人</text>
		</view>
		<view class="tabitem" @click="golist(4)">
			<image src="@/static/index/i6.png" mode=""></image>
			<text>{{systemInfo.configName}}氏成就</text>
		</view>
		<view class="tabitem" @click="golist(0)">
			<image src="@/static/index/i7.png" mode=""></image>
			<text>{{systemInfo.configName}}氏文化</text>
		</view>
		<view class="tabitem" @click="golist(1)">
			<image src="@/static/index/i8.png" mode=""></image>
			<text>{{systemInfo.configName}}氏新闻</text>
		</view>
	</view>
	<nameTitle :title="systemInfo.configName+'氏公告'" type='2'></nameTitle>
	<homeList :list='list2' :status="status2" orgin='index'></homeList>
	<nameTitle :title="systemInfo.configName+'氏新闻'" type='1'></nameTitle>
	<view class="newsList">
		<view class="" v-for="(item,index) in list1" :key="index" @click="godetail(item.id,1)">
			<image :src="item.img" mode=""></image>
			<view>{{item.title}}</view>
		</view>
	</view>
	<nameTitle :title="systemInfo.configName+'氏名人'" type='9'></nameTitle>
	<scroll-view :scroll-x="true" class="scow">
		<view class="headitem" v-for="(item,index) in manList" :key="index" @click="godetail(item.id,2)">
			<image :src="item.img" mode=""></image>
			<text>{{item.firstName}}{{item.lastName}}</text>
			<view class="">{{item.education}}</view>
		</view>
	</scroll-view>
	<nameTitle :title="systemInfo.configName+'氏成就'" type='4'></nameTitle>
	<homeList :list='list4' :status="status4" orgin='index'></homeList>
	<nameTitle :title="systemInfo.configName+'氏文化'" type='0'></nameTitle>
	<homeList :list='list0' :status="status0" orgin='index'></homeList>

</template>

<script setup>
	import {
		useSystemStore
	} from '@/stores/system.js'
	import {
		articleList,bannerList,
		celebrityList
	} from "@/api/index.js"
	const systemInfo = useSystemStore()
	import {
		onMounted,
		reactive,
		watch,
		nextTick,
		ref
	} from 'vue';
	import {
		onPageScroll,
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	function gozp() {
		if(!uni.getStorageSync('token')){
			uni.navigateTo({
				url:"/pages/login/login"
			})
			return
		}
		uni.navigateTo({
			url: "/pages/book/search"
		})
	}
	function gorq() {
		if(!uni.getStorageSync('token')){
			uni.navigateTo({
				url:"/pages/login/login"
			})
			return
		}
		uni.navigateTo({
			url: "/pages/book/rqSearch"
		})
	}
  function gojz(){
	  uni.navigateTo({
	  	url:"/pages/donate/index"
	  })
  }
	function gosearch() {
		uni.navigateTo({
			url: "/pages/search/search"
		})
	}
	function golist(e) {
		if (e == 9) {
			uni.navigateTo({
				url: "/pages/index/userList"
			})
		} else {
			uni.navigateTo({
				url: "/pages/index/list?type=" + e
			})
		}
	}
	function godetail(e, type) {
		uni.navigateTo({
			url: "/pages/index/detail?id=" + e + '&type=' + type
		})
	}
	let keyword = ref('');
	let page = ref(1)
    let banner=ref([])
	onMounted(() => {
		getIndexList()
        bannerList().then(res=>{
		   banner.value=res.rows
	   })
	})
	let list0 = ref([]) // 文化
	let list1 = ref([]) // 新闻
	let list2 = ref([]) // 公告
	let list4 = ref([]) // 成就
	let status0 = 'loading'
	let status2 = 'loading'
	let status4 = 'loading'
	let manList = ref([])
	async function getIndexList() {
		status0 = 'loading'
		status2 = 'loading'
		status4 = 'loading'
		let arr0 = await articleList({
			type: 0,
			limit: 3
		})
		status0 = 'nomore'
		list0.value = arr0.data
		let arr1 = await articleList({
			type: 1,
			limit: 3
		})
		list1.value = arr1.data
		let arr2 = await articleList({
			type: 2,
			limit: 3
		})
		status2 = 'nomore'
		list2.value = arr2.data
		let arr4 = await articleList({
			type: 4,
			limit: 3
		})
		status4 = 'nomore'
		list4.value = arr4.data
		let {
			data
		} = await celebrityList({
			limit: 3
		})
		manList.value = data
	}
</script>

<style lang="scss">
	.scow {
		width: 100%;
		white-space: nowrap;

		.headitem {
			width: 300rpx;
			margin-left: 30rpx;
			display: inline-block;

			image {
				width: 300rpx;
				height: 238rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			text {
				display: block;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
				margin-top: 10rpx;
			}

			view {
				margin-top: 6rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.newsList {
		margin-left: 30rpx;

		&>view {
			width: 690rpx;
			height: 390rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 30rpx;

			image {
				width: 690rpx;
				height: 390rpx;
			}

			view {
				height: 66rpx;
				width: 100%;
				background: linear-gradient(to bottom, #C59858 0%, #DAB787 100%);
				position: absolute;
				z-index: 99;
				bottom: 0;
				left: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				box-sizing: border-box;
				padding-left: 24rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				line-height: 66rpx;
				color: #FFFFFF;
			}
		}

		// <view class="">
		// 	<image src="../../static/cg.png" mode=""></image>
		// 	<text>家谱续写着一段一段的家族史家谱续写着一段一段的家族史</text>
		// </view>
	}

	page {
		background: #F6F6F6;
	}

	.fdj {
		width: 144rpx;
		height: 72rpx;
		background: #FBFAF7;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		border: 1rpx solid #DDDDDD;
		display: flex;
		align-items: center;
		position: absolute;
		z-index: 99;
		right: 30rpx;
		top: 30rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-left: 24rpx;
		}
	}

	.tabsbg {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;

		.tabitem {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 34rpx;
			width: 25%;

			image {
				width: 92rpx;
				height: 92rpx;
				margin-bottom: 16rpx;
			}

			text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
			}
		}

		.tabitem:nth-of-type(4n+1) {
			// margin-left: 50rpx;
		}
	}

	.banner {
		width: 750rpx;
		height: 450rpx;
		position: relative;

		.swiper-item {
			width: 750rpx;
			height: 450rpx;
			border-radius: 100% 100% 100% 100% / 0% 0% 35% 35%;
			overflow: hidden;

			image {
				width: 750rpx;
				height: 450rpx;
			}
		}
	}
</style>